<template>
    <div>
        <table border="1px solid #9B9B9B" cellspacing="0" cellpadding="5" >
            <thead>
                <tr>
                    <td rowspan="2">日期</td>
                    <td rowspan="2">计划</td>
                    <td rowspan="2">班次</td>
                    <td>在制品</td>
                    <td v-for="(item,index) in dataKey"
                    :key="index"
                    :colspan="item.dataLength"
                    :rowspan="item.dataLength === 1?2:1">{{ item.name }}</td>
                </tr>
                <tr>
                    <td>待分选</td>
                    <td v-for="item in secondDataKey">{{ item }}</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(time,index) in timedata">
                    <td>{{ time.month+'月'+time.day+'日' }}</td>
                    <td> </td>
                    <td>{{ time.shift }}</td>
                    <td v-for="data in dataList">{{ data[index] }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import mock from '../components/Sorting/mock'

const timedata = ref([])
const data = ref({})
const dataKey = ref([])
const secondDataKey = ref([])
const dataList = ref([])

const getData = ()=>{
    timedata.value = [...mock.time]
    data.value = {...mock.data}
    let arr1 = []
    let arr2 = []
    let arr3 = []
    Object.keys(data.value).forEach((item,index)=>{
        if(item === 'wait'){
            
        }else{
           arr1.push({
            key:item,
            name:data.value[item].name,
            dataLength: data.value[item].datas?data.value[item].datas.length:1
           })
           if(data.value[item].datas){
            data.value[item].datas.forEach(val=>{
                arr2.push(val.name)
            })
           }else{

           }
        }
        if(data.value[item].datas){
            data.value[item].datas.forEach(val=>{
                arr3.push(val.data)
            })
        }else{
            arr3.push(data.value[item].data)
        }
    })
    dataKey.value = [...arr1]
    secondDataKey.value = [...arr2]
    dataList.value = [...arr3]
}
getData()
</script>

<style scoped>
td{
    min-width: 50px;
    min-height: 25px;
    padding: 5px;
    text-align: center;
    white-space: nowrap;
}
td:hover{
    background-color: rgb(187, 187, 187);
}
tr:hover{
    background-color: rgb(238, 238, 238);
}
thead{
    position: sticky;
    top:0;
    background-color: rgba(213, 213, 213, 0.7);
    backdrop-filter: blur(4px);
}
table{
    background-color: #fff;
}
</style>
